<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/init.css">
  <title>时钟</title>
  <style>
    #timer {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 7.1rem;
      height: 1.2rem;
      background-color: #f4f4f4;
      transform: translate(-50%, -50%);
      overflow: hidden;
    }

    img {
      position: absolute;
      width: .8rem;
      height: 1.2rem;
    }

    li {
      position: absolute;
    }

    .col-0 {
      top: 0;
      left: 0;
    }

    .col-1 {
      top: 0;
      left: .9rem;
    }

    .split:nth-child(3) {
      position: absolute;
      top: 0;
      left: 1.8rem;
    }

    .col-2 {
      top: 0;
      left: 2.7rem;
    }

    .col-3 {
      top: 0;
      left: 3.6rem;
    }

    .split:nth-child(6) {
      position: absolute;
      top: 0;
      left: 4.5rem;
    }

    .col-4 {
      top: 0;
      left: 5.4rem;
    }

    .col-5 {
      top: 0;
      left: 6.3rem;
    }

    .new {
      top: 1.2rem;
    }

    .old {
      top: 0;
    }

  </style>
</head>

<body>
  <div id="timer">
    <ul>
      <li class="col-0" sort="0">
        <img class="old" src="./img/0.JPG" alt="">
        <img class="new" src="./img/0.JPG" alt="">
      </li>
      <li class="col-1" sort="0">
        <img class="old" src="./img/0.JPG" alt="">
        <img class="new" src="./img/0.JPG" alt="">
      </li>
      <img class="split" src="./img/colon.JPG" alt="">
      <li class="col-2" sort="0">
        <img class="old" src="./img/0.JPG" alt="">
        <img class="new" src="./img/0.JPG" alt="">
      </li>
      <li class="col-3" sort="0">
        <img class="old" src="./img/0.JPG" alt="">
        <img class="new" src="./img/0.JPG" alt="">
      </li>
      <img class="split" src="./img/colon.JPG" alt="">
      <li class="col-4" sort="0">
        <img class="old" src="./img/0.JPG" alt="">
        <img class="new" src="./img/0.JPG" alt="">
      </li>
      <li class="col-5" sort="0">
        <img class="old" src="./img/0.JPG" alt="">
        <img class="new" src="./img/0.JPG" alt="">
      </li>
      
    </ul>
  </div>
  <script src="./time.js"></script>
</body>

</html>
